<template>
 <div>
    <!-- 面包屑导航 -->
    <a-breadcrumb>
      <a-breadcrumb-item>
        <router-link to="/admin">仪表盘</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/admin/itemList">商品列表</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>{{this.$route.name}}</a-breadcrumb-item>
    </a-breadcrumb>
    <!-- /面包屑导航 -->
    <!-- 商品增加 -->
    <a-form-model
      :model="form"
      :label-col="{span:4}"
      :wrapper-col="wrapperCol"
      :rules="rules"
      ref="ruleForm"
    >
      <a-form-model-item label="商品名称" prop="title">
        <a-input v-model="form.title" />
      </a-form-model-item>
      <a-form-model-item label="商品描述" prop="desc">
        <a-textarea v-model="form.desc" auto-size />
      </a-form-model-item>
      <a-form-model-item label="商品价格">
        <a-input-number v-model="form.price" :min="0" />
      </a-form-model-item>
      <a-form-model-item label="商品库存">
        <a-input-number v-model="form.store" :min="0"/>
      </a-form-model-item>
      <a-form-model-item label="上架">
        <a-switch v-model="form.onSale" style="margin-bottom:5px" />
      </a-form-model-item>
      <a-form-model-item label="封面图片">
        <div class="clearfix">
          <a-upload
            action="/api/Upload"
            list-type="picture-card"
            :file-list="fileList"
            @preview="handlePreview"
            @change="handleChange"
          >
            <div v-if="fileList.length < 8">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </div>
      </a-form-model-item>
      <a-form-model-item label="文章内容" :wrapper-col="wrapperCol">
        <div id="conent"></div>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{offset:4}">
        <a-button type="primary" @click="subClcik"> 提交 </a-button>
      </a-form-model-item>
    </a-form-model>
    <!-- /商品增加 -->
 </div>
</template>

<script>
import { fetchaddItem } from '@api'
function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}

export default {
  data () {
    return {
      // 表单基本内容
      wrapperCol: { span: 12 },
      form: {
        title: '',
        desc: '',
        price: 0,
        store: 0,
        onSale: false,
        thumb: '',
        content: ''
      },
      // 表单规则
      rules: {
        title: [{ required: true, message: '请输入名称' }],
        desc: [{ required: true, message: '请输入描述' }]
      },
      previewVisible: false,
      previewImage: '',
      fileList: [],
      editor: null
    }
  },
  created () {},
  mounted () {
    this.edit()
  },
  methods: {
    // 富文本初始化
    edit () {
      const _this = this
      const editor = new this.$E('#conent')
      editor.config.zIndex = 500
      editor.config.onchange = function (newHtml) {
        _this.form.content = newHtml
      }
      editor.create()
      this.editor = editor
    },
    // 提交新增商品
    subClcik () {
      fetchaddItem({
        ...this.form
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success('提交完成！', 1, () => {
            this.editor.txt.clear()
          })
        }
      })
      this.form.title = ''
      this.form.desc = ''
      this.form.price = 0
      this.form.onSale = false
      this.form.store = 0
      this.form.thumb = ''
      this.fileList = []
    },
    handleCancel () {
      this.previewVisible = false
    },
    async handlePreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange (info) {
      this.fileList = info.fileList
      if (info.file.status !== 'uploading') {
      }
      if (info.file.status === 'done') {
        this.form.thumb = info.file.response.data.fileUrl
        this.$message.success(`${info.file.name} 图片上传成功`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 图片上传失败`)
      }
    }
  },
  beforeDestroy () {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  }
}

</script>

<style lang="scss" scoped>
.ant-form{
  margin-top: 50px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
